<template>
  <div class="content-box">
    <div class="padding-box">
      <div class="search-box">
        <el-form
          :inline="true"
          :model="searchFormInline"
          class="demo-form-inline"
        >
          <el-form-item>
            <el-button class="add-store" type="primary" :icon="Plus" @click="addDialogVisible=true">
              添加优惠券
            </el-button>
          </el-form-item>
          <el-form-item label="">
            <el-input
              v-model="searchFormInline.user"
              placeholder="请输入店铺名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="">
            <el-cascader
              class="charging-input-box"
              v-model="searchFormInline.value"
              :options="options"
              placeholder="请选择城市"
              clearable
            />
          </el-form-item>
          <el-form-item label="">
            <el-date-picker
              v-model="searchFormInline.value2"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
            />
          </el-form-item>
          <el-form-item>
            <el-button class="search-btn" type="primary" @click="">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          height="100%"
          stripe
          :header-cell-style="{
            color: '#828A9D',
            textAlign: 'center',
            height: '60px',
          }"
          :cell-style="{ textAlign: 'center', color: '#1B2431' }"
        >
          <el-table-column fixed prop="date" label="ID" />
          <el-table-column prop="name" label="优惠券名称" />
          <el-table-column prop="state" label="发放范围" />
          <el-table-column prop="city" label="可领取时间" />
          <el-table-column prop="address" label="优惠类型" />
          <el-table-column prop="address" label="有效期" />
          <el-table-column prop="address" label="已领取/优惠券总量">
            <template #default="scope">
              <span class="num-box" @click="lqDialogVisible=true">100/500</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="状态" />
          <el-table-column prop="zip" label="操作">
            <template #default="scope">
              <el-dropdown trigger="click">
                <el-button type="primary" link>操作</el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>编辑</el-dropdown-item>
                    <el-dropdown-item>暂停</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-box flex jc">
        <el-pagination
          v-model:page-size="searchFormInline.pageSize"
          v-model:current-page="searchFormInline.page"
          :total="searchFormInline.totalAll"
          @change="sizePageChangeFunc"
          background
          layout="total,sizes,prev, pager, next,jumper"
        />
      </div>
    </div>
  </div>
  <!-- 添加优惠券 -->
  <addCouponCom :show="addDialogVisible" @onClose="addDialogVisible=false"></addCouponCom>
  <!-- 领取记录 -->
   <collectionRecordCom :show="lqDialogVisible" @onClose="lqDialogVisible=false"></collectionRecordCom>
</template>
<script setup>
import {
  onMounted,
  reactive,
  toRefs,
  ref,
  getCurrentInstance,
  nextTick,
} from 'vue'
import txMapApi from '@/api/txMap'
import { Plus, Position } from '@element-plus/icons-vue'
import addCouponCom from '@/components/addCouponCom/index.vue'
import collectionRecordCom from '@/components/collectionRecordCom/index.vue'
const { proxy: that } = getCurrentInstance()
onMounted(() => {})
// 领取记录
let lqDialogVisible = ref(false);
// 添加优惠券
let addDialogVisible = ref(false)
// 检索
let searchFormInline = ref({
  pageSize: 10,
  page: 1,
  totalAll: 0,
})
const sizePageChangeFunc = e => {
  console.log(searchForm.value)
}
const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
]
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
// 数据列表
let tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
</script>
<style scoped lang="scss">
@import './index.scss';
</style>
<style lang="scss">
@import './store_dislog.scss';
</style>